import React, {useEffect, useRef} from 'react'
import IndexTable from "../../../../../../shared-components/Tables/IndexTable/IndexTable";
import NoDataPage from "../../../../../game/Football/NoDataPage/NoDataPage";

export const formatDXQOdd = (odd) => {


    if (odd) {
        let rate = odd / 0.25
        if (rate % 2 === 0) {
            return `${odd}`
        }

        let down = Math.abs(odd - 0.25)
        let up = Math.abs(odd + 0.25)
        return down > up
            ? `${up}/${down}`
            : `${down}/${up}`

    }
    return ''


}


const BigSmallTable = props => {

    const {
        data,
    } = props

    const ctnContent = useRef(null)

    useEffect(() => {

        if (data.length > 0) {
            props.setContentCtn(ctnContent.current, props.bindScrollEvent)
        }

    }, [data,])
    data.forEach(arr => {
        const firstOdd = arr[2]
        const nowOdd = arr[5]
        arr[2] = {
            from: firstOdd,
            to: formatDXQOdd(firstOdd),
        }
        arr[5] = {
            from: nowOdd,
            to: formatDXQOdd(nowOdd),
        }
        return arr
    })

    if (data.length === 0) return <NoDataPage/>

    const tHead = [
        {title: '公司', dataIndex: 'company',},
        {title: '大球', dataIndex: 'hostFirst',},
        {title: '初盘', dataIndex: 'tiedFirst',},
        {title: '小球', dataIndex: 'awayFirst',},
        {title: '大球', dataIndex: 'hostLatest',},
        {title: '即盘', dataIndex: 'tiedLatest',},
        {title: '小球', dataIndex: 'awayLatest',},
    ]

    return <div ref={ctnContent}>
        <IndexTable tHead={tHead} data={data}/>
    </div>
}

export default BigSmallTable
